<template>
    <el-card class="m-8">
        <section slot="header" class="mb-4 flex items-center justify-between">
            <div>
                <el-button class="mr-4" type="primary" @click="handleAdd">新增</el-button>
            </div>
                
            <!-- <div class="flex items-center justify-between">
                <span class="mr-4 block">礼物名称：</span>
                <el-input class="mr-4 input" v-model="listQuery.search" placeholder="请输入礼物名称"></el-input>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
            </div> -->
        </section>
  
        <el-table :data="tableList" align="center" border class="mt-4" stripe>
            <el-table-column label="序号" prop="id"/>
            <el-table-column label="奖池ID" prop="pool_id" />
            <el-table-column label="奖品ID" prop="prize_id" />
            <el-table-column label="概率" prop="rate"/>
            <el-table-column label="是否必得" prop="is_must">
              <template slot-scope="scoped">
                  <el-tag v-if="scoped.row.is_must === 1" type="success" size="normal"  effect="dark">
                    必得
                  </el-tag>
                  <el-tag v-else type="warning" size="normal"  effect="dark">
                    非必得
                  </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="奖品名称" prop="title"/>
            <el-table-column label="奖品图片" prop="icon">
              <template slot-scope="scoped">
                  <el-image v-if="scoped.row.icon" :src="scoped.row.icon" fit="fill" class="imageStyle" :lazy="true"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="数量/天数" prop="count"/>
            <el-table-column label="奖品类型" prop="reward_type">
              <template slot-scope="scoped">
                  <el-tag v-if="scoped.row.reward_type === 'pet-prop'" type="success" size="normal"  effect="dark">
                    洗练石
                  </el-tag>
                  <el-tag v-if="scoped.row.reward_type === 'gift'" type="success" size="normal"  effect="dark">
                    礼物
                  </el-tag>
                  <el-tag v-if="scoped.row.reward_type === 'product'" type="success" size="normal"  effect="dark">
                    装扮
                  </el-tag>
                  <el-tag v-if="scoped.row.reward_type === 'none'" type="success" size="normal"  effect="dark">
                    不送
                  </el-tag>
              </template>
            </el-table-column>
            
            <el-table-column label="创建时间" prop="created_at"/>

            <el-table-column align="center" label="操作" width="300">
                <template slot-scope="{row}">
                    <el-button type="text" @click="handleEdit(row)">编辑</el-button>
                    <el-button type="text" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
  
        <cus-pagination
            :limit.sync="listQuery.perPage"
            :page.sync="listQuery.page"
            :total="total"
            @pagination="initData"
        />
  
        <!-- 添加 -->
        
        <el-dialog
            :close-on-click-modal="false"
            :visible="addDialog2"
            lock-scroll
            :title="title"
            width="30%"
            @close="closeAddDialog2"
        >
                <el-form :model="form" ref="form" :rules="rules" label-width="150px" :inline="false" size="normal">
                    <el-form-item label="奖品ID" prop="prize_id">
                        <el-select v-model="form.prize_id" placeholder="请选择" clearable filterable>
                          <el-option v-for="item in options"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                          </el-option>
                        </el-select>
                        
                    </el-form-item>
                    <el-form-item label="概率" prop="rate">
                        <el-input v-model="form.rate"></el-input>
                    </el-form-item>
                    <el-form-item label="数量" prop="count">
                        <el-input v-model="form.count">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="是否必得" prop="is_must">
                      <el-radio-group v-model="form.is_must">
                          <el-radio :label="1">必得</el-radio>
                          <el-radio :label="0">非必得</el-radio>
                      </el-radio-group>
                    </el-form-item>
                </el-form>
        
                <section slot="footer">
                    <el-button @click="addDialog2 = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit(row)">确定</el-button>
                </section>
        </el-dialog>
  
    </el-card>
</template>

<script>
  import {
    yearMidPoolPrizeList,
    yearMidPoolPrizeSave,
    yearMidPoolPrizeDelete,
    yearMidPrizeList
  } from '@/api/feedbackActivity'
  
  export default {
    data() {
      return {
        title: '新增',
        dialogVisible: true,
        selectData: '',
        options: [],
        tableList: [],
        user_code: '',
        listQuery: {
          pool_id: '',
          page: 1,
          perPage: 10,
        },
        meta: {
          page: 1,
          perPage: 10
  
        },
        total: 0,
        /* 弹出框开关 */
        addDialog: false,
        addDialog2: false,
  
        rejectLoading: false,
        passLoading: false,
        id: '',
        // 拒绝原因
        reject_reason: '',
        form: {
          id: undefined,
          is_must: 1,
          prize_id: undefined,
          count: undefined,
          rate: undefined,
        },
        rules: {
          prize_id: [{ required: true, message: '请选择', trigger: 'blur' }]
        },
      }
    },
    created() {
      this.listQuery.pool_id = this.$route.query.id
      this.initData()
      this.getYearMidPrizeList()
    },
    methods: {
      async getYearMidPrizeList() {
        const { data } = await yearMidPrizeList({
          page: 1,
          perPage: 1000,
        })
        this.options = data.list
      },
      handleAdd() {
        this.title = '新增'
        this.addDialog2 = true
      },
      handleEdit(row) {
        this.title = '编辑'
        this.form = JSON.parse(JSON.stringify(row))
        this.addDialog2 = true
      },
      handleSearch() {
        this.listQuery.page = 1
        this.initData()
      },
      handleReset() {
        this.listQuery = {
          user_code: '',
          nickname: '',
          page: 1,
          perPage: 10,
        }
        this.initData()
      },
      async initData() {
        try {
          for (let key in this.listQuery) {
            this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
          }
          const { data } = await yearMidPoolPrizeList(this.listQuery)
          this.listQuery.page = data.meta.page
          this.total = data.meta.total
          this.tableList = data.list
        } catch (e) {
          console.error(e)
        }
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const { code, data} = await yearMidPoolPrizeDelete({
            id: row.id
          })
          if(code === 200) {
  
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.initData()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      onSubmit() {
        this.$refs['form'].validate(valid => {
            if (valid) {
              this.form.pool_id = this.$route.query.id
              yearMidPoolPrizeSave(this.form).then(res => {
                  if(res.code === 200) {
                      this.initData()
                      this.addDialog2 = false
                      this.$message({
                      type: 'success',
                      message: '操作成功'
                      })
                  }
              })
                
            } else {
                return false
            }
        })
      },
      closeAddDialog2() {
        this.addDialog2 = false
        if (this.$refs['form']) {
            this.$refs['form'].clearValidate() // 清除整个表单的校验
            this.$refs['form'].resetFields() // 清除整个表单的校验
        }
        this.form = {
            id: undefined,
            is_must: 1,
            prize_id: undefined,
            count: undefined,
            rate: undefined,
        }
      },
      handleAddProp() {

      }
    }
  }
</script>
  
<style scoped>
  .imageStyle {
    width: 150px;
  }

  .input{
    width: 200px;
  }
</style>
  